<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 520px;
            height: 280px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .imgContainer {
            position: absolute;
            width: 3640px;
            height: 280px;
            left: -520px;
        }
        .imgContainer img {
            float: left;
        }
        .right {
            position: absolute;
            z-index: 10;
            font-size: 33px;
            font-weight: 900;
            color: #fff;
            text-shadow: 1px 1px red,-1px 1px red,-1px -1px red,1px -1px red;
            top: 50%;
            transform: translateY(-50%);
            left: 5px;
        }
        .left {
            position: absolute;
            z-index: 10;
            font-size: 33px;
            font-weight: 900;
            color: #fff;
            text-shadow: 1px 1px red,-1px 1px red,-1px -1px red,1px -1px red;
            top: 50%;
            transform: translateY(-50%);
            right: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">&gt;</div>
        <div class="right">&lt;</div>
        <div class="imgContainer">
            <img src="./images/5t.png">
            <img src="./images/1t.png">
            <img src="./images/2t.png">
            <img src="./images/3t.png">
            <img src="./images/4t.png">
            <img src="./images/5t.png">
            <img src="./images/1t.png">
        </div>
    </div>
    <script>
    function cloneEle (){
        
    }
    var container = document.querySelector(".container");
    var imgContainerEle = document.querySelector(".imgContainer");
    var target = 0 ;
    autoPlay() ; 
    container.onmouseleave = function (){
        autoPlay() ;
    }
    function autoPlay(){
        var timer = setInterval(function(){
            if ( target == -2600){
                imgContainerEle.style.left = '0px' ;
                target = 0 ;
            }
            target = target - 520 ; 
            move(imgContainerEle,target,"left",function(){
                // console.log("运动完成");
            });
            container.onmouseover = function ( event ){
                clearInterval(timer);
                var e = event || window.event ; 
                var ele = e.target ; 
                
                if ( ele.className == 'left' ){
                    ele.onclick = function (){
                        if ( target == -2600){
                            imgContainerEle.style.left = '0px' ;
                            target = 0 ;
                        }
                        target = target - 520 ; 
                        move(imgContainerEle,target,"left");
                    }
                }
                if ( ele.className == 'right' ){
                    ele.onclick = function (){
                        console.log(target);
                        console.log(target == 520);
                        if ( target == 0){
                            imgContainerEle.style.left = '-2600px' ;
                            target = -2600 ;
                        }
                        target = target + 520 ; 
                        move(imgContainerEle,target,"left");
                    }
                }
            }
        },3000);
    }
    function move(ele, target, dir, cb) {
        function fn() {
            var num = parseInt(getComputedStyle(ele)[dir]);
            var speed = target < num ? -8 : 8;
            if (num == target) {
                // console.log("停止了");
                cb && cb();
            } else {
                num += speed;
                ele.style[dir] = num + "px";
                requestAnimationFrame(fn);
            }
        }
        fn();
    }
    </script>
</body>

</html>